Scripting
文档
更新日志
隐私
文档
更新日志
隐私
简体中文

以分区表示数据层级

本示例展示如何在 Scripting 应用中使用 Section 组件，在 List 中清晰地组织层级化数据。通过将相关数据（例如员工列表）按部门分组，并为每个分组设置标题，可以更好地提升信息的可读性与结构性。

概览

你将学习如何：

  • 使用 List 和 Section 展示结构化数据
  • 根据部门将员工信息分组显示
  • 创建可复用的行视图组件
  • 将公司 → 部门 → 员工的层级数据结构转换为列表界面

数据模型

示例定义了一个公司层级结构，包含公司、部门和员工三层：

1type Person = {
2  name: string
3  phoneNumber: string
4}
5
6type Department = {
7  name: string
8  staff: Person[]
9}
10
11type Company = {
12  name: string
13  departments: Department[]
14}

示例数据

1const companyA: Company = {
2  name: "Company A",
3  departments: [
4    {
5      name: "Sales",
6      staff: [
7        { name: "Juan Chavez", phoneNumber: "(408) 555-4301" },
8        { name: "Mei Chen", phoneNumber: "(919) 555-2481" }
9      ]
10    },
11    {
12      name: "Engineering",
13      staff: [
14        { name: "Bill James", phoneNumber: "(408) 555-4450" },
15        { name: "Anne Johnson", phoneNumber: "(417) 555-9311" }
16      ]
17    }
18  ]
19}

人员行组件

PersonRowView 是一个可复用组件，用于展示员工姓名和电话号码，采用垂直排版并添加辅助样式。

1function PersonRowView({ person }: { person: Person }) {
2  return <VStack alignment={"leading"} spacing={3}>
3    <Text font={"headline"} foregroundStyle={"label"}>{person.name}</Text>
4    <HStack spacing={3} font={"subheadline"} foregroundStyle={"secondaryLabel"}>
5      <Label title={person.phoneNumber} systemImage={"phone"} />
6    </HStack>
7  </VStack>
8}

主视图布局

主界面使用 NavigationStack 包裹 List，每个部门对应一个 Section。部门名称作为区块标题，区块内通过 PersonRowView 渲染员工列表。

1function Example() {
2  return <NavigationStack>
3    <List
4      navigationTitle={"Represent data hierarchy in sections"}
5      navigationBarTitleDisplayMode={"inline"}
6    >
7      {companyA.departments.map(department =>
8        <Section
9          header={<Text>{department.name}</Text>}
10        >
11          {department.staff.map(person =>
12            <PersonRowView person={person} />
13          )}
14        </Section>
15      )}
16    </List>
17  </NavigationStack>
18}

启动入口

脚本展示界面后，在关闭时退出脚本：

1async function run() {
2  await Navigation.present({
3    element: <Example />
4  })
5
6  Script.exit()
7}
8
9run()

关键组件说明

  • List：用于构建可滚动的列表容器。
  • Section：将列表按组分类，每组有标题和子项。
  • NavigationStack：提供导航上下文与导航栏标题显示。
  • PersonRowView：可复用组件，统一渲染员工数据格式。

适用场景

  • 按部门、分类、地区等组织联系人或数据条目
  • 展示有父子结构的数据，如清单、文件、配置项等
  • 实现信息有序分组，提升用户的查阅与交互体验

通过在 List 中使用 Section，你可以构建清晰、分组合理的层级数据界面，使复杂内容一目了然，适合各类数据展示与信息架构设计。

大纲